import {useQuery} from '@/hooks/useQuery'
import {useEffect, useState} from 'react'
import {ProductList, ProductURL} from '@/type/product'
import {productList} from '@/api'
import config from '@/static/config'
import styled from "./index.module.scss"
import {Input} from 'antd'
import {SearchOutlined} from '@ant-design/icons'
import Base64 from '@/utils/base64'
import {useNavigate} from 'react-router-dom'


const {Search} = Input

const Product = () => {
	const navigate = useNavigate()
	const query = useQuery<ProductURL>()
	const [list, setList] = useState<ProductList[]>([])
	useEffect(() => {
		if (query) {
			productList(query).then(res => {
				console.log(res)
				setList(res.data)
			})
		}

	}, [query])



	const onSearch = (v:string) => {
		if (v) {
			productList( {search: v}).then(res => {
				console.log(res)
				setList(res.data)
			})
		}else {
			productList(query).then(res => {
				console.log(res)
				setList(res.data)
			})
		}
	}

	const onClick = (item: ProductList) => {
		const base:Base64 = new Base64()
		const str = `product_id=${item.product_id}`
		navigate(`/home/productinfo/${base.encode(str)}`, {
			replace: true
		})
	}

	return (
		<div className={styled.main}>
			<div>
				<Search
					onSearch={onSearch}
					addonBefore={<SearchOutlined />}
					size={'large'}
					enterButton={'搜索'}
					placeholder={'请输入'}
					allowClear
				></Search>
			</div>
			<div className={styled.box}>
				{
					list.map((item) => (
						<div key={item.id} className={styled.box_list} onClick={() => onClick(item)}>
							<img width={180} height={200} src={config.productImgUrl + item.product_pic} alt=""/>
							<div className={styled.box_list_name}>{item.product_name}</div>
							<div className={styled.box_list_info}>
								<span>&yen;{item.product_money}</span>
								<span>{item.product_order}人付款</span>
								<span>{item.product_address}</span>
							</div>
						</div>
					))
				}
			</div>
		</div>
	)


}

export default Product
